<template>
    <view class="mask" :class="{ show }" @click="close">
        <view class="mask-cont" :style="{ height }" @click.stop>
            <template v-if="isTitle">
                <!-- 标题 -->
                <view class="title margin-lr-base">
                    <view class="text-lg text-bold text-center">{{ title }}</view>
                    <view v-if="isClose" @click="close" class="close icon-guanbi1 text-lg"></view>
                </view>

                <!-- 内容 -->
                <view class="margin-lr-base">
                    <slot name="content"></slot>
                </view>
            </template>
            <template v-else>
                <view v-if="isClose" @click="close" class="close-cont icon-guanbi1 text-lg"></view>
                <!-- 内容 -->
                <view class="margin-lr-base">
                    <slot name="content"></slot>
                </view>
            </template>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

interface popupType {
    isTitle?: boolean; // 是否显示标题
    height?: string; // 高度
    title?: string; // 标题
    isClose?: boolean; // 是否显示关闭图标
}

const props = withDefaults(defineProps<popupType>(), {
    isTitle: true,
    height: "55vh",
    title: "",
    isClose: true
});

const show = ref<boolean>(false);
const close = () => {
    show.value = false;
};

const open = () => {
    show.value = true;
};

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.mask.show {
    visibility: visible;
    z-index: 999;
    .mask-cont {
        bottom: 0;
    }
}
.mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.4);
    visibility: hidden;
    z-index: 9;

    .mask-cont {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -50vh;
        background: #ffffff;
        border-radius: 30rpx 30rpx 0 0;
        transition: 0.5s;
        padding-bottom: calc(env(safe-area-inset-bottom) / 2);
        .title {
            height: 120rpx;
            line-height: 120rpx;
            position: relative;

            .close {
                position: absolute;
                right: 20rpx;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}

.close-cont {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}
</style>
